import React, {Component} from 'react'
import Taro from '@tarojs/taro'
import {AtAvatar} from 'taro-ui'
import {Image, View} from '@tarojs/components'

import {getStorageSync} from "../../utils/common";
import {formatTime} from '../../utils/tool'

import {getDy} from "../../service/dynamic";

import './index.scss'


class My extends Component {
  state: any = {
    userInfo: {},
    dyList: []
  }

  componentDidMount() {
    this.loadData()
  }

  componentDidShow() {
    this.loadData()
  }

  loadData() {
    const res = getStorageSync('userInfo')
    if (res.id) {
      this.setState({
        userInfo: res
      })
      this.getMyDynamic(res.id)
    } else {
      Taro.navigateBack({
        delta: 1
      })
      return
    }
  }

  async getMyDynamic(id) {
    let params = {
      user_id: id
    }
    console.log(params);
    const res = await getDy(params)
    console.log(res);
    this.setState({
      dyList: res.list
    })
  }

  handlePreviewImage(imgList, i,e) {
    e.stopPropagation()
    Taro.previewImage({
      current: imgList[i], //所有图片 需要预览的图片链接列表
      urls: imgList  //当前显示图片的链接
    })
  }

  HandleNavToDetail(id,uID) {
    Taro.navigateTo({
      url: `/pages/detail-comment/index?id=${id}&uID=${uID}`,
    })
  }

  render() {
    const {userInfo, dyList} = this.state
    console.log(dyList.length);
    return (
      <View className='my_container'>
        <View className='header'>
          <View className='head-picture'>
            <AtAvatar className='imgAtr' image={userInfo.user_picture || ''} />
          </View>
          <View className='state-info'>
            <View className='layout'>
              <View className='userName'>{userInfo.user_name || '--'}</View>
              <view className='identity'>{userInfo.edu_account ? '已认证' : '未认证'}</view>
            </View>
            <view className='class_num'>学号：{userInfo.edu_account || '--'}</view>
            <view>班级：{userInfo.edu_class || '--'}</view>
          </View>
          <View className='dy_len'>已发表动态数： {dyList.length}</View>
        </View>
        <View className='dy_list'>
          {
            dyList && dyList.length !== 0 ?
              dyList.map((item: any) => {
                  let imgList = JSON.parse(item.dy_img)
                  return (<View className='dy_list_item' onClick={this.HandleNavToDetail.bind(this,item.id,userInfo.id)}>
                    <View className='time'>{formatTime(item.created_at)()}</View>
                    <View className='content'>{item.dy_content}</View>
                    <View className='dy_img_list'>
                      {
                        imgList && imgList.length !== 0 ?
                          imgList.map((url: string, i: number) =>
                            <View
                              onClick={this.handlePreviewImage.bind(this, imgList, i)}
                              className='img_list_item'
                              key={i}
                            ><Image
                              className='img_list_item_img'
                              src={url}
                              mode='aspectFill'
                            /></View>)
                          :
                          ''
                      }
                    </View>
                  </View>)
                }
              )
              : <View className='no_dy'>您还没有发表过动态哦～</View>
          }
        </View>
      </View>
    )
  }
}

export default My
